import React, { memo } from "react";
import { connect } from "react-redux";
import {
  addNumber,
  addNumberAction,
  subNumberAction,
} from "./store/modules/counter";

const App = memo((props) => {
  const { count, addNumber, subNumber } = props;
  function changNumberHandle(num, isAdd = true) {
    if (isAdd) {
      addNumber(num);
    } else {
      subNumber(num);
    }
  }
  return (
    <div>
      <h1>App:{count}</h1>
      <p>
        <button onClick={(e) => changNumberHandle(1)}>+1</button>
        <button onClick={(e) => changNumberHandle(5, false)}>-5</button>
      </p>
    </div>
  );
});

const mapStateToProps = (state) => {
  return {
    count: state.counter.count,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    addNumber(num) {
      dispatch(addNumberAction(num));
    },
    subNumber(num) {
      dispatch(subNumberAction(num));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
